<template>
  <div>
    <el-drawer
      v-model="drawerVisible"
      :size="650"
      :title="titleMap[mode]"
      @closed="$emit('closed')"
      append-to-body
    >
      <el-container v-loading="saveLoading">
        <el-main>
          <el-form
            :model="form"
            :rules="rules"
            ref="saveForm"
            label-width="120px"
          >
            <el-form-item label="上级字典" prop="parentCode">
              <hh-dict
                ref="hhdict"
                v-model="form.parentCode"
                :dictType="form.dictType"
                :disabledCode="form.dictCode"
                placeholder="顶级字典"
                checkStrictly
                clearable
                filterable
              ></hh-dict>
            </el-form-item>
            <el-form-item label="字典名称" prop="dictName">
              <el-input
                v-model="form.dictName"
                placeholder="请输入字典名称"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="字典编码" prop="dictCode">
              <el-input
                v-model="form.dictCode"
                placeholder="请输入字典编码"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="排序" prop="orderNum">
              <el-input-number
                v-model="form.orderNum"
                type="number"
                placeholder=""
                controls-position="right"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="字典类型" prop="dictType">
              <!-- <el-input
                v-model="form.dictType"
                placeholder="请输入字典类型"
                :disabled="true"
              ></el-input> -->
			  {{form.dictType}}
            </el-form-item>
            <el-form-item label="状态" prop="status">
              <hh-dict
                v-model="form.status"
                dictType="status"
                placeholder="请选择状态"
                clearable
                filterable
              ></hh-dict>
            </el-form-item>
            <el-form-item label="备注信息" prop="remarks">
              <el-input
                v-model="form.remarks"
                type="textarea"
                maxlength="200"
                placeholder=""
                clearable
                show-word-limit
              ></el-input>
            </el-form-item>
          </el-form>
        </el-main>
        <el-footer>
          <div class="form-footer">
            <el-button type="" @click="close">取消</el-button>
            <el-button type="primary" @click="submit">提交</el-button>
          </div>
        </el-footer>
      </el-container>
      <!-- <template #footer>
			<el-button @click="visible=false" >取 消</el-button>
			<el-button type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
		</template> -->
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: "dict-save",
  emits: ["success", "closed"],
  data() {
    return {
      saveLoading: false,
      drawerVisible: false,
      mode: "add",
      titleMap: {
        add: "新增数据字典",
        edit: "编辑数据字典",
      },
      tip: "添加成功",
      form: {
        dictName: "",
        dictCode: "",
        orderNum: 30,
        parentCode: 0,
        dictType: "",
        status: "1",
        remarks: "",
      },
      rules: {
        dictName: [{ required: true, message: "请输入字典名称" }],
        dictCode: [{ required: true, message: "请输入字典编码" }],
        dictType: [{ required: true, message: "请输入字典类型" }],
        status: [{ required: true, message: "请输入状态" }],
        orderNum: [
          { required: true, message: "请输入排序" },
          {
            validator: (rule, value, callback) => {
              if (value < 0) callback(new Error("请输入不小于0的整数"));
              else callback();
            },
            trigger: "blur",
          },
        ],
        remarks: [{ min: 0, max: 200, message: "请勿超过200字" }],
      },
      apiObj: this.$API.dict.list,
    };
  },
  mounted() {},
  watch: {
    "form.parentCode"(val) {
      if (val == null) {
        this.form.parentCode = 0;
      }
    },
  },
  methods: {
    //打开
    open(mode = "add") {
      this.mode = mode;
      this.drawerVisible = true;
      return this;
    },
    //修改
    async edit(id) {
      this.tip = "修改成功";
      this.drawerVisible = true;
      this.saveLoading = true;
      let params = { id: id };
      let res = await this.$API.dict.details.get(params);
      if (res.code == 0) {
        this.form = res.data;
        this.saveLoading = false;
        this.$nextTick(() => {
          this.$refs.hhdict.getRemoteData();
        });
      } else {
        let errdata = this.$TOOL.response(res);
        this.$alert(
          this.$TOOL.json.get("", errdata, "message"),
          this.$TOOL.json.get("", errdata, "title"),
          {
            type: "error",
            confirmButtonText: "确定",
            dangerouslyUseHTMLString: true,
            showCancelButton: false,
          }
        )
          .then(() => {
            this.drawerVisible = false;
          })
          .catch(() => {});
      }
    },
    //提交
    submit() {
      this.$refs.saveForm.validate(async (valid) => {
        if (valid) {
          let res = await this.$API.dict.save.post(this.form);
          if (res.code == 0) {
            this.$message.success(this.tip);
            //调用父类刷新
            this.$emit("onRefreshDict");
            this.drawerVisible = false;
          } else {
            let errdata = this.$TOOL.response(res);
            this.$alert(
              this.$TOOL.json.get("", errdata, "message"),
              this.$TOOL.json.get("", errdata, "title"),
              {
                type: "error",
                confirmButtonText: "确定",
                dangerouslyUseHTMLString: true,
                showCancelButton: false,
              }
            );
          }
        }
      });
    },
    //表单注入数据
    setData(data) {
		console.log("data",data);
      Object.assign(this.form, data);
	  console.log("this.form",this.form);
    },
    // 关闭页面
    close() {
      this.$emit("closed");
    },
  },
};
</script>

<style></style>
